<template>
	<view class="container">
		<view class="top-bg">
			<u-navbar 
			isBack 
			title="修改信息" 
			background="rgba(0,0,0,0)"
			back-icon-color="#fff"
			title-color="#fff"></u-navbar>
		</view>
		<view class="content">
			<image :src="`${baseimg}/static/common/order-color.png`" class="info-img" mode=""></image>
			<view class="info">		
				<view class="title">
					业主信息
				</view>
				<view class="name df-bt">
					<text>业主姓名</text>
					<input type="text" v-model="list.realname" class="title-input" placeholder="请输入业主真实姓名" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>				
				</view>
				<view class="phone df-bt">
					<text>手机号码</text>
					<input type="text" v-model="list.phone" class="title-input" placeholder="请选择业主手机号码" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>				
				</view>
				
				<view class="city df-bt">
					<text class="txt">城市</text>
					<view class="city-input df-bt">
						<input type="text" v-model="list.city" class="title-input" placeholder="点击填写" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="city df-bt">
					<text class="txt">县区</text>
					<view class="city-input df-bt">
						<input type="text" v-model="list.district" class="title-input" placeholder="请选择县区" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="city df-bt">
					<text class="txt">街道</text>
					<view class="city-input df-bt">
						<input type="text" v-model="list.street" class="title-input" placeholder="请选择街道" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="city df-bt">
					<text class="txt">小区</text>
					<view class="city-input df-bt">
						<input type="text" v-model="list.estate" class="title-input" placeholder="请输入小区" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="city df-bt">
					<text class="txt">详细地址</text>
					<view class="city-input df-bt">
						<input type="text" v-model="list.address" class="title-input" placeholder="请输入详细地址" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
			</view>
			<view class="house-info">
				<view class="title">
					房子信息
				</view>
				<view class="name df-bt">
					<text>户型</text>
					<input type="text" v-model="list.house_type"  class="title-input" placeholder="比如：x室x厅" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>				
				</view>
				<view class="phone df-bt">
					<text>面积</text>
					<input type="text" v-model="list.house_area"  class="title-input" placeholder="比如：xxxm" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>				
				</view>
			</view>
			
			<view class="appeal">
				<view class="title">
					设计诉求
				</view>
				<view class="textarea">
				     <textarea v-model="list.remark" maxlength="1000" placeholder-style="color:#D8D8D8" placeholder="填写简介让别人快速了解您的店铺~"/>
				</view>
			</view>
			
			<view class="contract">
				<view class="title">
					订单合同
				</view>
				<view class="upload">
				    <u-upload  upload-text="图片/PDF"></u-upload>
				</view>
			</view>
			<view class="design">
				<view class="title">
					设计图纸
				</view>
				<view class="upload">
				    <u-upload  upload-text="添加图纸"></u-upload>
				</view>
			</view>
			
			<view class="contract-amount">
				<view class="title">
					合同金额
				</view>
				<input type="text" v-model="list.contract_price" placeholder="请输入订单总金额" class="input-pay" />
			</view>
		</view>
		<view class="footer">
			<u-button type="warning" shape="circle">确定并发给客户</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseimg:this.$static,
				name:'',
				phone:'',
				list:{}
			}
		},
		onLoad(option) {
			
			let params = {
				id:option.id
			}
			this.$api.designerOrder_getDetail(params).then(res=>{
				if(res.code == 1){
					this.list = res.data
				}
			})
		},
	}
</script>

<style lang="less" scoped>
	
	.container{
		
		.top-bg{
			background:  url(https://manager.ryz1620.com/static/home-personal/personal-bg.png) no-repeat top;
			width: 100%;
			height: 468rpx;
			position: relative;
			/deep/ .u-navbar .u-border-bottom{
						border: 0 !important;
					}
		}
		.content{
			position: absolute;
			left: 0;
			top: 190rpx;
			z-index: 99;
			padding: 24rpx 24rpx 200rpx 24rpx;
			width: 100%;
			.info-img{
				width: 702rpx;
				height: 38rpx;
			}
			.info{
				padding: 24rpx;
				background-color: #fff;
				// border-radius: 16rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.name{
					width: 70%;
					margin: 40rpx 0;
				}
				.phone{
					width: 70%;
					margin-bottom: 80rpx;
				}
				.city{					
					margin-bottom: 40rpx;
					.txt{
						width: 30%;
					}
					.city-input{
						width: 90%;
						.title-input{
							// text-align: right;
							margin-right: 20rpx;
						}
					}
					.icon-jinru{
						color: #D8D8D8;
						font-size: 26rpx;
					}
					
				}
			}
			.house-info{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.name{
					width: 70%;
					margin: 40rpx 0;
				}
				.phone{
					width: 70%;
					margin-bottom: 80rpx;
				}
			}
			.appeal{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.textarea{
					background: #F8F8F8;
					padding: 24rpx;
					overflow-y: auto;
					height: 160rpx;
					margin-top: 40rpx;
				}
			}
			.contract{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.upload{
					margin-top: 40rpx;
				}
			}
			.design{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.upload{
					margin-top: 40rpx;
				}
			}
			.contract-amount{
					padding: 24rpx;
					background-color: #fff;
					border-radius: 16rpx;
					margin-top: 30rpx;
					.title{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: #ff9900;
					}
			
					.input-pay{
							width: 100%;
							height: 84rpx;
							margin-top: 40rpx;
							background-color: #F8F8F8;
					}
					
			}
		}
		.footer{
			height: 150rpx;
			width: 100%;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 9999;
			padding: 30rpx;
		}
	}
</style>
